<template>
    <div class="bor">
      <A30></A30>
      <A29></A29>
      <h1>组合式API</h1>
      <h2>数字：{{ count }}</h2>
      <button @click="add" class="add">加+2</button>
      <button @click="sub" class="sub">减-2</button>
    </div>
  </template>
  <script setup>
  import A30 from "./A30.vue";
  import { ref } from "vue";
  const count = ref(0);
  const add = () => {
    count.value += 2;
  };
  const sub = () => {
    count.value -= 2;
  };
  </script>
  
  <style>
  .bor {
    border: 1px solid blue;
  }
  .add {
    background-color: red;
  }
  .sub {
    background-color: green;
  }
  </style>    
  